<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创新实验室 - 软硬融合的综合型实验室</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #0066cc;
            --secondary-color: #00aaff;
            --dark-bg: #0a1929;
            --darker-bg: #07121d;
            --light-text: #f0f6fc;
            --gray-text: #c9d1d9;
            --card-bg: #132f4c;
            --transition: all 0.3s ease;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: var(--dark-bg);
            color: var(--light-text);
            line-height: 1.6;
            overflow-x: hidden;
        }
        
        /* 导航栏样式 */
        header {
            background-color: var(--darker-bg);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        }
        
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 5%;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--secondary-color);
            display: flex;
            align-items: center;
        }
        
        .logo i {
            margin-right: 0.5rem;
            color: var(--primary-color);
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin-left: 2rem;
        }
        
        .nav-links a {
            color: var(--light-text);
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition);
            padding: 0.5rem 0;
            position: relative;
        }
        
        .nav-links a:hover {
            color: var(--secondary-color);
        }
        
        .nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: var(--secondary-color);
            transition: var(--transition);
        }
        
        .nav-links a:hover::after {
            width: 100%;
        }
        
        .menu-btn {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
        }
        
        /* 内容区域通用样式 */
        section {
            padding: 5rem 5%;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
        }
        
        .section-title h2 {
            font-size: 2.5rem;
            color: var(--secondary-color);
            margin-bottom: 1rem;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            width: 80px;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        /* 首页样式 */
        #home {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            padding-top: 8rem;
            background: linear-gradient(to bottom, var(--darker-bg), var(--dark-bg));
        }
        
        .hero-content h1 {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .hero-content p {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto 2rem;
            color: var(--gray-text);
        }
        
        /* 项目展示样式 */
        .project {
            display: flex;
            align-items: center;
            margin-bottom: 4rem;
            background-color: var(--card-bg);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .project-content {
            flex: 1;
            padding: 2rem;
        }
        
        .project-image {
            flex: 1;
        }
        
        .project-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        .project:nth-child(even) {
            flex-direction: row-reverse;
        }
        
        .project-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }
        
        /* 加入我们样式 */
        .info-card {
            background-color: var(--card-bg);
            border-radius: 10px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .info-card h3 {
            color: var(--secondary-color);
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }
        
        .info-card ul {
            list-style-position: inside;
            margin-left: 1rem;
        }
        
        .info-card li {
            margin-bottom: 0.5rem;
        }
        
        /* 页脚样式 */
        footer {
            background-color: var(--darker-bg);
            padding: 3rem 5%;
            text-align: center;
        }
        
        .qq-group {
            font-size: 1.2rem;
            margin: 1rem 0;
            color: var(--secondary-color);
        }
        
        .copyright {
            margin-top: 2rem;
            color: var(--gray-text);
            font-size: 0.9rem;
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .project, .project:nth-child(even) {
                flex-direction: column;
            }
            
            .project-grid {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 768px) {
            .menu-btn {
                display: block;
            }
            
            .nav-links {
                position: fixed;
                top: 70px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 70px);
                background-color: var(--darker-bg);
                flex-direction: column;
                align-items: center;
                justify-content: center;
                transition: var(--transition);
            }
            
            .nav-links.active {
                left: 0;
            }
            
            .nav-links li {
                margin: 1.5rem 0;
            }
            
            .hero-content h1 {
                font-size: 2.5rem;
            }
            
            .section-title h2 {
                font-size: 2rem;
            }
        }
        
        /* 工具类 */
        .scroll-top {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 50px;
            height: 50px;
            background-color: var(--primary-color);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            transition: var(--transition);
            z-index: 999;
        }
        
        .scroll-top.active {
            opacity: 1;
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .fade-in {
            animation: fadeIn 1s ease forwards;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <nav>
            <div class="logo">
                <i class="fas fa-microchip"></i>
                <span>创新实验室</span>
            </div>
            <ul class="nav-links">
                <li><a href="#home">首页</a></li>
                <li><a href="#projects">项目展示</a></li>
                <li><a href="#join">加入我们</a></li>
            </ul>
            <div class="menu-btn">
                <i class="fas fa-bars"></i>
            </div>
        </nav>
    </header>

    <!-- 首页部分 -->
    <section id="home">
        <div class="hero-content fade-in">
            <h1>欢迎加入创新实验室</h1>
            <p>创新实验室是以"软硬融合"为核心的综合型实验室，配备示波器、万用表、信号发生器、逻辑分析仪、PCB雕刻机、3D打印机等基础设备，专注于51单片机、STM32单片机、Arduino单片机、树莓派、FPGA等的设计与开发。</p>
            <p>近年来，成员在全国大学生电子设计竞赛中获国家一等奖1项、省级一等奖8项及若干省级二、三等奖；在全国机器人大赛中获国家二等奖1项；在全国大学生嵌入式芯片与系统设计竞赛中获国家三等奖1项、中部赛区一等奖1项及三等奖2项。</p>
            <p>实验室学习氛围浓厚，欢迎加入，共创未来！</p>
        </div>
    </section>

    <!-- 项目展示部分 -->
    <section id="projects">
        <div class="section-title">
            <h2>项目展示</h2>
        </div>
        
        <div class="project">
            <div class="project-content">
                <h3>全国大学生电子设计大赛</h3>
                <p>2025年指导老师们带领实验室学生们参加全国大学生电子设计大赛，取得了优异成绩。参赛项目涵盖了智能控制系统、信号处理、电力电子等多个方向，展现了实验室在电子设计领域的强大实力。</p>
            </div>
            <div class="project-image">
                <img src="data/diansai1.jpg" alt="全国大学生电子设计大赛">
            </div>
        </div>
        
        <div class="project">
            <div class="project-content">
                <h3>全国大学生嵌入式芯片与系统设计竞赛</h3>
                <p>2025年全国大学生嵌入式芯片与系统设计竞赛芯片应用赛道，实验室团队设计并实现了一款基于先进嵌入式芯片的智能识别系统，在比赛中获得了评委的高度评价。</p>
            </div>
            <div class="project-image project-grid">
                <img src="data/qiansai1.jpg" alt="嵌入式竞赛项目1">
                <img src="data/qiansai2.jpg" alt="嵌入式竞赛项目2">
            </div>
        </div>
    </section>

    <!-- 加入我们部分 -->
    <section id="join">
        <div class="section-title">
            <h2>加入我们</h2>
        </div>
        
        <div class="info-card">
            <h3>一、招新信息</h3>
            <ul>
                <li>招新日期：xxxx年xx月xx日（周x）</li>
                <li>地点：文源楼A504教室</li>
            </ul>
        </div>
        
        <div class="info-card">
            <h3>二、考核方式</h3>
            <ul>
                <li>卷面考试（实际C语言编程一些基础知识和计算机与硬件电路最基础的知识）题目量较少。</li>
                <li>可与同伴组队进行学习</li>
                <li>学习路线一：电路+单片机+C开发
                    <p>通过实验室的硬件资源，进行电路设计与搭建，学习单片机原理及C语言编程，将理论知识应用于实践，一个月后进行成果考察。</p>
                </li>
                <li>学习路线二：电路+树莓派+Python开发
                    <p>利用实验室的硬件设备，进行电路连接与控制，学习树莓派的基本操作及Python编程，通过实际项目锻炼编程与硬件结合的能力，一个月后进行综合评估。</p>
                </li>
            </ul>
        </div>
        
        <div class="info-card">
            <h3>三、学习路线说明</h3>
            <ul>
                <li>电路+单片机+C开发：
                    <p>学习电路基础，认识并分析常用电子元件，能够设计简单电路。重点学习STM32单片机（可参考B站江协科技视频），掌握C语言基本语法、数据类型、运算符、控制结构、函数、数组和指针等，了解其在嵌入式系统中的特点和应用，使用Keil5等工具进行开发。</p>
                </li>
                <li>电路+树莓派+Python开发：
                    <p>掌握电路基础后，深入了解树莓派的基本概念、发展历程及在嵌入式系统中的核心地位。学习树莓派接口使用及 Raspberry Pi OS 系统的安装配置。掌握Python编程，包括基本语法、数据类型、运算符、控制结构、函数、模块等，能编写简单程序，学习GPIO库控制GPIO引脚，探索树莓派在图像处理和机器学习领域的应用，学习OpenCV库进行图像处理。</p>
                </li>
            </ul>
        </div>
        
        <div class="info-card">
            <h3>四、说明</h3>
            <p>实验室提供丰富的硬件资源，同学们登记后即可获取使用，同时务必爱护并妥善保管，共同维护实验室财产。</p>
            <p>硬件学习需同步推进硬件知识与软件技能，具有一定难度。建议大家合理规划时间，充分利用空余时间在实验室进行学习，以达到更好的学习效果。</p>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="qq-group">
            <i class="fab fa-qq"></i> QQ群：XXXXXXXXXX
        </div>
        <p>联系我们获取更多信息</p>
        <div class="copyright">
            &copy; 2025 创新实验室 - 文源楼A504教室
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <div class="scroll-top">
        <i class="fas fa-arrow-up"></i>
    </div>

    <script>
        // 简单的页面交互功能
        document.addEventListener('DOMContentLoaded', function() {
            const menuBtn = document.querySelector('.menu-btn');
            const navLinks = document.querySelector('.nav-links');
            const scrollTopBtn = document.querySelector('.scroll-top');
            
            // 移动端菜单切换
            menuBtn.addEventListener('click', () => {
                navLinks.classList.toggle('active');
            });
            
            // 点击导航链接关闭移动端菜单
            document.querySelectorAll('.nav-links a').forEach(link => {
                link.addEventListener('click', () => {
                    navLinks.classList.remove('active');
                });
            });
            
            // 滚动显示返回顶部按钮
            window.addEventListener('scroll', () => {
                if (window.pageYOffset > 300) {
                    scrollTopBtn.classList.add('active');
                } else {
                    scrollTopBtn.classList.remove('active');
                }
            });
            
            // 返回顶部功能
            scrollTopBtn.addEventListener('click', () => {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
            
            // 为所有导航链接添加平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href');
                    if (targetId === '#') return;
                    
                    const targetElement = document.querySelector(targetId);
                    if (targetElement) {
                        window.scrollTo({
                            top: targetElement.offsetTop - 80,
                            behavior: 'smooth'
                        });
                    }
                });
            });
        });
    </script>
</body>
</html>